<template>
    <div class="manageByfirst">
      <el-button type="primary" @click="addBrandBtn">添加品牌</el-button>
      <template>
        <el-table
          :data="secondForm"
          border
          style="width: 100%; margin-top:15px"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="品牌编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="brandName"
            label="品牌名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="brandLogo"
            label="品牌logo">
          <template slot-scope="scope">
            <img class="img" :src='"http://127.0.0.1:3000"+scope.row.brandLogo' alt="">
          </template>
          </el-table-column>
          <el-table-column
            prop="categoryName"
            label="所属分类">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 添加对话框 -->
      <el-dialog title="添加品牌" :visible.sync="adddialogFormVisible">
        <template>
          <span>请选择分类：</span>
          <el-select v-model="updateBrandList.categoryId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.categoryName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        <el-form :model="addBrandList"  :rules="rules" ref="addBrandList"  style="margin-top:15px;">
          <el-form-item  prop="brandName">
            <el-input v-model="addBrandList.brandName" placeholder="请输入品牌名称"></el-input>
          </el-form-item>
        </el-form>
        <!-- 图片上传 -->
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:3000/category/addSecondCategoryPic"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success='handleSuccess'
          :file-list="fileList"
          :with-credentials ='true'
          name='pic1'
          list-type="picture"
          style="margin-top:15px;"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="adddialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSub('addBrandList')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑对话框 -->
      <el-dialog title="编辑品牌" :visible.sync="editdialogFormVisible">
        <template>
          <span>请选择分类：</span>
          <el-select v-model="editSelectid" placeholder="请选择">
            <el-option
              v-for="item in editoptions"
              :key="item.value"
              :label="item.categoryName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        <el-form :model="editform" ref="editform" style="margin-top:15px;">
          <el-form-item label="品牌名：" :label-width="formLabelWidth">
            <el-input v-model="editform.brandName"></el-input>
          </el-form-item>
        </el-form>
        <template>
          <span>是否启动：</span>
          <el-select v-model="isStartid" placeholder="请选择">
            <el-option
              v-for="item in isStartoptions"
              :key="item.value"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:3000/category/addSecondCategoryPic"
          :on-preview="handlePreview2"
          :on-remove="handleRemove2"
          :on-success='handleSuccess2'
          :file-list="fileList2"
          :with-credentials ='true'
          name='pic1'
          list-type="picture"
          style="margin-top:15px;"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSub">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
import { selectSecondList, selectFirstList, addSecondCate, updateSecondCate } from '@/api'
export default {
  data () {
    return {
      formLabelWidth: '80px',
      secondForm: [],
      pageObj: {
        page: 1,
        pageSize: 10
      },
      // 添加列表
      addBrandList: {
        brandName: '',
        categoryId: '',
        brandLogo: '',
        hot: 0
      },
      // 添加规则
      rules: {
        brandName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      // filelist
      fileList2: [],
      adddialogFormVisible: false,
      // 下拉列表
      options: [],
      // 双向绑定
      categoryId: '',
      // 图片上传
      fileList: [],
      /* 更新品牌列表 */
      updateBrandList: {
        id: '',
        brandName: '',
        categoryId: '',
        brandLogo: '',
        isDelete: 0,
        hot: 0
      },
      /* 编辑 */
      editdialogFormVisible: false,
      editSelectid: '',
      // 编辑下拉列表
      editoptions: [],
      // 编辑表单
      editform: {
      },
      // 是否启动--源
      isStartoptions: [
        {
          value: '启动',
          id: 1
        },
        {
          value: '禁用',
          id: 0
        }
      ],
      // 是否启动
      isStartid: '',
      // 提交更新的数据
      updateList: {
        id: '',
        brandName: '',
        categoryId: '',
        brandLogo: '',
        isDelete: '',
        hot: 0
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /* 编辑删除 */
    // 更新的按钮
    editSub () {
      this.updateList.brandName = this.editform.brandName
      this.updateList.categoryId = this.editSelectid
      this.updateList.isDelete = this.isStartid
      console.log(this.updateList)
      updateSecondCate(this.updateList).then(res => {
        console.log(res)
      })
    },
    handleRemove2 (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview2 (file) {
      console.log(file)
    },
    handleSuccess2 (response, file, fileList) {
      this.updateList.brandLogo = response.picAddr
    },
    /* 添加提交 */
    handleEdit (index, row) {
      // 存储id的值
      this.updateList.id = row.id
      console.log(row)
      selectFirstList(this.pageObj).then(res => {
        this.editoptions = res.rows
        console.log(this.editoptions)
      })
      // 给下拉列表赋值
      this.editSelectid = row.categoryId
      // 显示对话框
      this.editdialogFormVisible = true
      // 给品牌名赋值
      this.editform.brandName = row.brandName
      // 给图片显示
      this.updateList.brandLogo = row.brandLogo
      this.fileList2 = []
      this.fileList2.push({ name: row.brandName, url: 'http://127.0.0.1:3000' + row.brandLogo })
      // 是否启动
      this.isStartid = row.isDelete
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    addSub (formName) {
      this.addBrandList.categoryId = this.updateBrandList.categoryId
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // select选择器等于0 不能执行以下代码
          console.log(this.updateBrandList.categoryId)
          if (this.updateBrandList.categoryId === '请选择') {
            this.$message({
              message: '请输入下拉列表的值',
              type: 'warning'
            })
            return false
          }
          addSecondCate(this.addBrandList).then(res => {
            if (res.success) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.init()
              this.adddialogFormVisible = false
              this.$refs[formName].resetFields()
            } else {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          })
        } else {
          this.$message({
            message: '更新失败',
            type: 'warning'
          })
          return false
        }
      })
    },
    /* 图片上传 */
    handleRemove (file, fileList) {
    },
    handlePreview (file) {
      console.log(file)
    },
    handleSuccess (response, file, fileList) {
      this.addBrandList.brandLogo = response.picAddr
    },
    /* 添加品牌按钮 */
    addBrandBtn () {
      this.adddialogFormVisible = true
      selectFirstList(this.pageObj).then(res => {
        this.options = res.rows
        this.updateBrandList.categoryId = '请选择'
        this.fileList = []
      })
    },
    /* 初始化 */
    init () {
      selectSecondList(this.pageObj).then(res => {
        this.secondForm = res.rows
        this.updateBrandList.id += this.secondForm.length + 1
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="less" scoped>
  .img{
    display: block;
    width: 40%
  }
</style>
